<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="./shaizi_img/sai5.png" width=100 height=100 />
    <img src="./shaizi_img/sai2.png" width=100 height=100 />
    <img src="./shaizi_img/sai3.png" width=100 height=100 />
    <button onclick="run()">开始</button>
    <button onclick="stop()">停止</button>

    <script>
        // 随机数  1-6   
        // 生成随机数以后 拼接一个新的图片路径 修改img的src属性
        // 不断的在重复执行 上面两步的操作  定时器  开始定时器启动 结束 定时器关闭

        // 点击按钮 开始定时器   var count = setInterval(函数,时间)
        // 停止按钮  结束定时器  clearInterval(count)


        function zhuan() {
            var imgs = document.querySelectorAll('img');
            var num = Math.floor(Math.random() * 6 + 1);
            imgs[0].src = `./shaizi_img/sai${num}.png`;
            var num1 = Math.floor(Math.random() * 6 + 1);
            imgs[1].src = `./shaizi_img/sai${num1}.png`;
            var num2 = Math.floor(Math.random() * 6 + 1);
            imgs[2].src = `./shaizi_img/sai${num2}.png`;
        }
        var count;
        var btns = document.querySelectorAll('button');
        // 执行的方法 
        function run(){
            count = setInterval(zhuan,66)
            // btns[0].removeAttribute("onclick"); // 点完第一次以后 开始按钮点击不执行任何东西 
            // btns[1].setAttribute("onclick","stop()");
            btns[0].disabled = true;
            btns[1].disabled = false;
        }
        // 结束的方法 
        function stop(){
            clearInterval(count)
            // btns[1].removeAttribute("onclick");
            // btns[0].setAttribute("onclick","run()");
            btns[1].disabled = true;
            btns[0].disabled = false;
        }

        // var btns = document.querySelectorAll('button');
        // 这种绑定事件的方式  不能采用自定义属性的方式 不生效 
        // btns[0].onclick = function(){
        //     run()
        //     btns[0].removeAttribute("onclick"); // 点完第一次以后 开始按钮点击不执行任何东西 
        //     btns[1].setAttribute("onclick","stop()");
        // }

        // btns[1].onclick = function(){
        //     stop();
        //     btns[1].removeAttribute("onclick");//
        //     btns[0].setAttribute("onclick","run()");   
        // }
    </script>

</body>

</html>